<div id="mycanvas" style="width:500px;height:300px;"></div>
<script type="module">
    import { Canvas, TreeLayout } from 'vislite';

    var painter = new Canvas(document.getElementById('mycanvas'));

    var treeLayout = new TreeLayout();

    treeLayout.setOption({
        type: "rect",
        direction: "TB",
        x: 250,
        y: 20,
        width: 500,
        height: 260
    });

    var data = {
        "name": "前端",
        "children": [{
            "name": "基础",
            "children": [{
                "name": "HTML"
            }, {
                "name": "CSS"
            }, {
                "name": "JavaScript"
            }, {
                "name": "DOM"
            }]
        }, {
            "name": "框架"
        }, {
            "name": "小技术"
        }]
    };

    var tree = treeLayout.use(data);

    // 绘制连线
    painter.config({
        strokeStyle: 'red'
    });
    for (var key in tree.node) {
        var pid = tree.node[key].pid;

        // 如果父结点存在，和父结点连起来
        if (pid) {
            var dist = (tree.node[key].top - tree.node[pid].top) * 0.5;

            painter
                .beginPath()
                .moveTo(tree.node[key].left, tree.node[key].top)
                .bezierCurveTo(
                    tree.node[key].left, tree.node[key].top - dist,
                    tree.node[pid].left, tree.node[pid].top + dist,
                    tree.node[pid].left, tree.node[pid].top
                ).stroke();
        }
    }

    // 绘制节点和文字
    painter.config({
        strokeStyle: 'red',
        fontSize: 12
    });
    for (var key in tree.node) {
        painter.config({
            fillStyle: "white"
        }).fullCircle(tree.node[key].left, tree.node[key].top, 10);

        painter.config({
            fillStyle: "black"
        }).fillText(key, tree.node[key].left + 15, tree.node[key].top);
    }

</script>